<!-- Sidebar.vue -->
<template>
  <div class="SideBarSidebar">
    <!-- Add sidebar icons here -->
    <div class="SidebarIcon" v-for="icon in icons" :key="icon.id">
      <!-- <div v-if=" icon.id=== 2">
        <h2>一</h2>
      </div> -->
      <RouterLink :to="`${icon.path}`">
        <img :src="icon.p" alt=""/>
        <div class = "icon_p">
          {{ icon_ps[icon.id] }}
        </div>
      </RouterLink>
    </div>

  </div>
</template>

<script setup lang="ts" name="SideBar">
import icon5 from '@/assets/svg/sidebar/mine.svg';
import icon3 from '@/assets/svg/sidebar/knowgragh.svg';
import icon1 from '@/assets/svg/sidebar/simple-icons_apacheecharts.svg';
import icon2 from '@/assets/svg/sidebar/classroom.svg';

const icons = [
  {id:0,p:icon1,path:'/teacher'},
  {id:1,p:icon2,path:'/aiclass'},
  {id:2,p:icon3,path:'/draw_graph'},
  {id:3,p:icon5,path:'/mine'},
]

const icon_ps = ['首页', '智慧课堂', '知识图谱', '我的']

</script>

<style scoped>
.body {
  height: 100%;
}
.SideBarSidebar {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #41A2FF;
  padding: 10px;
}

.SidebarIcon {
  width: 100%;
}

.icon img {
  &:hover {
    width: 30px;
    height: 30px;
  }
  width: 20px;
  height: 20px;
}

.icon_p {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}

.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
}

</style>
